import React, { useState, useEffect } from 'react'
import {withRouter} from 'react-router-dom'
import { Button, Table, message, Tooltip } from 'antd';
import EditGiftModal from './EditGiftModal'
import api from '../../../api/activityManage'
import tool from '../../../utils/commonFuc'

const GiftManage = (props) => {
    const [state, setState] = useState({
        searchData: {
            page: 1,
            rows: 10
        },
        giftList:[],//列表数据
        giftListTotal:0,//列表总数
        editModal:{//编辑数据
            visible: false,
            title:'新建奖品',
            data:{}
        },        
    });

    //更新state
    const updateState = (newState) => {
        let data = JSON.parse(JSON.stringify(state))
        setState(Object.assign({}, data, newState))
    }
    useEffect(()=>{
        let actId = tool.getQueryString(props.location.search,'actId')//活动ID
        if(actId){
            state.searchData.actId = actId
        }
        getList()
    },[])
    const columns = [
        { title: '奖品名称', dataIndex: 'name', key: 'name', width: 80, },
        { title: '奖品图片', dataIndex: 'goodUrl', key: 'goodUrl', render: (text, record) => (
            <img width={75} src={record.goodUrl} />
        ), },
        { title: '奖品描述', dataIndex: 'memo', key: 'memo', width: 120,ellipsis:true },
        { title: '兑换积分', dataIndex: 'points', key: 'points', },
        { title: '库存', dataIndex: 'store', key: 'store', },
        { title: '已兑换', dataIndex: 'hasConvert', key: 'hasConvert', },
        { title: '奖品类型', dataIndex: 'type', key: 'type', render: (text, record) => (
                <span>{record.type==1?'实物奖品':''}</span>
            ),
        },
        { title: '权重', dataIndex: 'weight', key: 'weight', },
        { title: '状态', dataIndex: 'state', key: 'state', render: (text, record) => (
            <span>{record.state==1?'有效':'无效'}</span>
        ), },
        {
            title: '操作', render: (text, record) => (
                <Button type="link" onClick={()=>{showModal(2,record)}}>编辑</Button>
            ),
        },
    ];
    const pageObj = {// 表格分页对象
        size: "small",
        total: state.giftListTotal,
        pageSize: state.searchData.rows,
        showSizeChanger: true,
        showQuickJumper: true,
        showTotal: () => `共 ${state.giftListTotal} 条`,
        onChange: (page) => {
            getList({page:page})
        },
        onShowSizeChange: (page, rows) => {
            getList({page:1,rows:rows})
        }
    }
    // 获取列表
    const getList = (data)=>{
        let obj = {
            actId:state.searchData.actId,
            page:data?(data.page?data.page:state.searchData.page):state.searchData.page,
            rows:data?(data.rows?data.rows:state.searchData.rows):state.searchData.rows,
        }
        obj = Object.assign({},obj,data?data:{})
        api.getActivitiesGoodsList(obj,(res)=>{
            console.log(res)
            updateState({
                searchData:obj,
                giftList:res.recordList,
                giftListTotal:res.totalCount
            })
        })
    }
    //添加和编辑
    const showModal = (type,data)=>{
        // type:1-添加；2-编辑；3-关闭；4-关闭并调获取列表
        if(type==4){
            api.getActivitiesGoodsList(state.searchData,(res)=>{
                updateState({
                    giftList:res.recordList,
                    giftListTotal:res.totalCount,
                    editModal:{
                        visible:type>2?false:true,
                        title:type==1?'新建奖品':'编辑奖品',
                        data:{}
                    }
                })
            })
        }else{
            updateState({
                editModal:{
                    visible:type>2?false:true,
                    title:type==1?'新建奖品':'编辑奖品',
                    data:data
                }
            })
        }
    }
    //返回
    const goBack = ()=>{
        props.history.goBack()
    }
    return (
        <div>
            <div style={{ marginBottom: 30, paddingTop: 20 }}>
                <div className="clearfix" >
                    <Button type="primary" onClick={()=>{goBack()}} style={{marginRight:20}}>返回</Button>
                    <Button type="primary" onClick={()=>{showModal(1,{})}}>新建奖品</Button>
                </div>
            </div>
            <Table
                columns={columns}
                dataSource={state.giftList}
                pagination={pageObj}
                rowKey="id"
            />
            {/* 编辑奖品模态框 */}
            <EditGiftModal actId={state.searchData.actId} editModal={state.editModal} showModal={showModal}></EditGiftModal>
        </div>
    )
}

export default withRouter(GiftManage)